<template>
  <div v-if="showList">
    <van-nav-bar title="我的订单" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <van-tabs v-model="active" swipeable @click="onClick" style="margin-top: 51px;">
      <van-tab title="全部">
        <OrderCard :data="allOrderList" @getOrderListByOpenIdAndOrderStatus="getOrderListByOpenIdAndOrderStatus"></OrderCard>
      </van-tab>
      <van-tab title="待付款">
        <OrderCard :data="toPayOrderList" @getOrderListByOpenIdAndOrderStatus="getOrderListByOpenIdAndOrderStatus"></OrderCard>
      </van-tab>
      <van-tab title="待发货">
        <OrderCard :data="toSendOrderList" @getOrderListByOpenIdAndOrderStatus="getOrderListByOpenIdAndOrderStatus"></OrderCard>
      </van-tab>
      <van-tab title="待收货">
        <OrderCard :data="toReceiveOrderList" @getOrderListByOpenIdAndOrderStatus="getOrderListByOpenIdAndOrderStatus"></OrderCard>
      </van-tab>
      <van-tab title="已收货">
        <OrderCard :data="receivedOrderList" @getOrderListByOpenIdAndOrderStatus="getOrderListByOpenIdAndOrderStatus"></OrderCard>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderCard from '@/components/OrderCard'
export default {
  name: 'orderList',
  components: { OrderCard },
  data () {
    return {
      active: 0, // 标签页下标
      allOrderList: [], // 全部订单
      toPayOrderList: [], // 待付款订单
      toSendOrderList: [], // 待发货订单
      toReceiveOrderList: [], // 待收货订单
      receivedOrderList: [], // 已收货订单
      showList: false // 订单显示标志位，为解决页面先加载数据还未加载问题
    }
  },
  methods: {
    /**
     * 返回
     */
    onClickLeft () {
      this.$router.push('mine')
    },
    /**
     * 根据订单状态查询订单列表
     * @param openId
     * @param orderStatus 0：已取消 1：待付款 2：待发货 3：待收货 4：已收货
     */
    getOrderListByOpenIdAndOrderStatus (openId, orderStatus) {
      const self = this
      if (orderStatus === '0') { // 查询全部
        const param = { openId: openId, orderStatus: '' }
        self.axios.get('api/shop/getOrderListByOpenIdAndOrderStatus', { params: param }).then(resp => {
          if (resp.data.code !== '-1') {
            self.allOrderList = resp.data.data
            this.showList = true
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      } else {
        const param = { openId: openId, orderStatus: orderStatus }
        self.axios.get('api/shop/getOrderListByOpenIdAndOrderStatus', { params: param }).then(resp => {
          if (resp.data.code !== '-1') {
            if (orderStatus === '1') { // 待付款
              self.toPayOrderList = resp.data.data
              this.showList = true
            } else if (orderStatus === '2') { // 待发货
              self.toSendOrderList = resp.data.data
              this.showList = true
            } else if (orderStatus === '3') { // 待收货
              self.toReceiveOrderList = resp.data.data
              this.showList = true
            } else if (orderStatus === '4') { // 已收货
              self.receivedOrderList = resp.data.data
              this.showList = true
            }
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }
      // 重定向标签页面
      self.active = Number(orderStatus)
    },
    /**
     * 切换标签页
     * @param name 0:全部 1：待付款 2：待发货 3：待收货 4：已收货
     */
    onClick (name) {
      let openId = self.$store.state.openId
      // 根据订单状态查询订单列表
      this.getOrderListByOpenIdAndOrderStatus(openId, name.toString())
    }
  },
  mounted () {
    const self = this
    let openId = self.$store.state.openId
    // 0:全部 1：待付款 2：待发货 3：待收货 4：已收货
    let active = self.$route.params.active
    if (active === undefined) { // 付款成功后重定向该页面传值active
      active = self.$route.query.active
    }
    if (active !== undefined) {
      self.active = Number(active)
    }
    // 根据订单状态查询订单列表
    self.getOrderListByOpenIdAndOrderStatus(openId, self.active.toString())
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}
</style>
